<template>
  <div id="departmentEcharts"></div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: "TodayCensus",
    components: {},
    data() {
      return {
        num: [],
        date: []
      }
    },
    computed: {
      ...mapState(['staffDataInfo'])
    },
    methods: {
      changeStaffInfo(data) {
        let num = [];
        let date = [];
        data.day7Online.forEach(item => {
          num.push(item.count);
          date.push(item.date);
        })
        this.num = num;
        this.date = date;
      },

      renderChart () {
        this.changeStaffInfo(this.staffDataInfo);
        let div = document.getElementById("departmentEcharts");
        var myChart = this.echarts.init(div);
        myChart.setOption({
          color: ['#EA5455', '#7367F0', '#28C76F', '#e338d6'],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                type: "dotted",
                opacity: 0.6
              }
            },
            padding: [8, 14],
            backgroundColor: "rgb(255,255,255)",
            borderColor: "#eee",
            borderWidth: "1",
            textStyle: {
              color: "#666"
            },
            extraCssText: "box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);"
          },
          grid: {
            left: "3%",
            right: "6%",
            bottom: "5%",
            top: '20%',
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            // 轴线文字
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(0, 0, 0, 0.5)",
                lineHeight: 26
              }
            },
            // 刻度
            axisTick: {
              show: true,
              length: 2,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            // 轴线的颜色以及宽度
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 0, 0, 0.4)",
                width: 1,
                type: "solid"
              }
            },
            data: this.date
          },
          yAxis: {
            type: "value",
            // 分隔线样式设置
            splitLine: {
              show: true,
              lineStyle: {
                color: '#e0e0e0',
                type: "dashed"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(0, 0, 0, 0.3)",
                padding: [0, 6, 0, 0]
              }
            },
            // 刻度
            axisTick: {
              show: true,
              length: 3,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            // 轴线的颜色以及宽度
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 0, 0, 0.4)",
                width: 1,
                type: "solid"
              }
            },
          },
          series: [{
            name: "今日在场人数统计",
            type: "line",
            stack: "总量",
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(234, 84, 85, 0.6)'
                  }, {
                    offset: 1,
                    color: 'rgba(234, 84, 85, 0.1)'
                  }],
                  globalCoord: false
                }
              }
            },
            lineStyle: {
              width: 3
            },
            data: this.num
          }]
        });
      }
    }
  }
</script>

<style scoped>
  #departmentEcharts{
    width: 100%;
    height: 100%;
  }
</style>
